<template>
  <div class="absolute right-0 top-20 z-10 w-80 bg-white border-l border-gray-200 flex flex-col">
    <!-- 面板标题 -->
    <div class="p-4 border-b border-gray-200">
      <h3 class="text-lg font-semibold text-gray-900">图纸管理</h3>
      <p class="text-sm text-gray-500">管理导入的图纸文件</p>
    </div>

    <!-- 图纸列表 -->
    <div class="flex-1 p-4 space-y-4 overflow-y-auto">
      <!-- 导入按钮 -->
      <div class="mb-4">
        <button 
          @click="importDrawing"
          :disabled="isImporting"
          class="w-full px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
        >
          <span v-if="isImporting">导入中... {{ importProgress }}%</span>
          <span v-else>导入图纸</span>
        </button>
      </div>

      <!-- 错误提示 -->
      <div v-if="importError" class="p-3 bg-red-50 border border-red-200 rounded-md">
        <p class="text-sm text-red-600">{{ importError }}</p>
      </div>

      <!-- 图纸列表 -->
      <div v-if="hasImportedDrawings" class="space-y-3">
        <h4 class="text-sm font-medium text-gray-900">已导入图纸 ({{ importedDrawingCount }})</h4>
        
        <div v-for="drawing in importedDrawings" :key="drawing.id" class="border border-gray-200 rounded-md p-3">
          <!-- 图纸信息 -->
          <div class="flex items-center justify-between mb-2">
            <div class="flex-1 min-w-0">
              <h5 class="text-sm font-medium text-gray-900 truncate">{{ drawing.name }}</h5>
              <p class="text-xs text-gray-500">{{ drawing.type.toUpperCase() }} • {{ formatFileSize(drawing.metadata.fileSize) }}</p>
            </div>
            <button 
              @click="removeDrawing(drawing.id)"
              class="p-1 text-gray-400 hover:text-red-500 transition-colors"
              title="删除图纸"
            >
              <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path>
              </svg>
            </button>
          </div>

          <!-- 图纸预览 -->
          <div class="w-full h-20 bg-gray-100 rounded border flex items-center justify-center mb-2">
            <span class="text-xs text-gray-500">{{ drawing.metadata.width }}×{{ drawing.metadata.height }}</span>
          </div>

          <!-- 底图控制 -->
          <div class="flex items-center justify-between text-xs">
            <div class="flex items-center space-x-2">
              <input 
                type="checkbox" 
                :checked="drawing.visible"
                @change="toggleDrawingVisibility(drawing.id)"
                class="rounded"
              />
              <span class="text-gray-700">显示底图</span>
            </div>
            <div class="flex items-center space-x-2">
              <input 
                type="range" 
                min="0" 
                max="1" 
                step="0.1" 
                :value="drawing.opacity || 1"
                @input="setDrawingOpacity(drawing.id, parseFloat($event.target.value))"
                class="w-16"
              />
              <span class="text-gray-500 w-8">{{ Math.round((drawing.opacity || 1) * 100) }}%</span>
            </div>
          </div>
        </div>

        <!-- 清空所有图纸 -->
        <div class="pt-3 border-t border-gray-200">
          <button 
            @click="clearAllDrawings"
            class="w-full px-3 py-2 text-sm text-red-600 border border-red-200 rounded-md hover:bg-red-50 transition-colors"
          >
            清空所有图纸
          </button>
        </div>
      </div>

      <!-- 空状态 -->
      <div v-else class="text-center py-8">
        <svg class="w-12 h-12 text-gray-300 mx-auto mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
        </svg>
        <p class="text-sm text-gray-500">还没有导入任何图纸</p>
        <p class="text-xs text-gray-400 mt-1">点击上方按钮导入图纸文件</p>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { useDrawingImport } from '@/composables/design/useDrawingImport.js'
import { useCanvasStore, useLayerStore } from '@/stores'

// Canvas Store
const canvasStore = useCanvasStore()

// 图纸导入功能
const {
  isImporting,
  importProgress,
  importError,
  importedDrawings,
  hasImportedDrawings,
  importedDrawingCount,
  importDrawing,
  removeDrawing,
  clearAllDrawings,
  setDrawingLayerVisibility,
  setDrawingLayerOpacity
} = useDrawingImport(canvasStore.canvasElement)

// 底图控制方法
const toggleDrawingVisibility = (drawingId) => {
  const drawing = importedDrawings.value.find(d => d.id === drawingId)
  if (drawing) {
    drawing.visible = !drawing.visible
    // 更新背景层中的对象可见性
    const layerStore = useLayerStore()
    const backgroundLayer = layerStore.getLayerByType('background')
    if (backgroundLayer) {
      backgroundLayer.objects.forEach(obj => {
        if (obj.drawingId === drawingId) {
          obj.visible = drawing.visible
        }
      })
    }
  }
}

const setDrawingOpacity = (drawingId, opacity) => {
  const drawing = importedDrawings.value.find(d => d.id === drawingId)
  if (drawing) {
    drawing.opacity = opacity
    // 更新背景层中的对象透明度
    const layerStore = useLayerStore()
    const backgroundLayer = layerStore.getLayerByType('background')
    if (backgroundLayer) {
      backgroundLayer.objects.forEach(obj => {
        if (obj.drawingId === drawingId) {
          obj.opacity = opacity
        }
      })
    }
  }
}

// 格式化文件大小
const formatFileSize = (bytes) => {
  if (bytes === 0) return '0 B'
  const k = 1024
  const sizes = ['B', 'KB', 'MB', 'GB']
  const i = Math.floor(Math.log(bytes) / Math.log(k))
  return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + ' ' + sizes[i]
}
</script>

<style scoped>
/* 组件样式 */
</style>
